<template>
    <div class="main-box">
        <div class="title">发表文章</div>
        <div style="display:flex;flex-direction: column;flex: 1;overflow: hidden;">
            <div style="display:flex;margin-bottom: 10px;">
                <el-input ref="articleTitleRef" v-model="article.articleTitle" placeholder=""
                    style="flex:1;margin-right: 15px;"></el-input>
                <div>
                    <!-- <el-button type="danger" plain style="width:100px;">保存草稿</el-button> -->
                    <el-button type="danger" style="width:100px;" @click="preparePublishArticle">发布文章</el-button>
                </div>
            </div>
            <div style="flex: 1;overflow: hidden;border: 1px solid #dddddd;">
                <VMdEditor ref="articleContentRef" v-model="article.mdContent"
                    @contentChange="e => article.htmlContent = e.html" />
            </div>
        </div>
        <Dialog @close="handleCloseDialog" @confirm="handleConfirm" :dialog="dialog" width="600px">
            <el-form ref="articleFormRef" :model="article" :rules="articleFormRules" label-width="80px">
                <el-form-item prop="categoryId" label="文章分类">
                    <el-tree-select v-model="article.categoryId" check-strictly default-expand-all
                        clearable
                        :data="categoryTreeSelectData" placeholder="请选择文章分类" :props="defaultProps"
                        :render-after-expand="false" style="width: 100%;" />
                </el-form-item>
                <el-form-item prop="tagIdList" label="文章标签">
                    <div>
                        <el-tag :disable-transitions="true" @close="handleCloseTag(tag)" closable v-for="tag in tagList" :key="tag.id" class="tag">{{ tag.tagName }}</el-tag>
                    </div>
                    <el-popover v-if="tagAddable" placement="bottom-start" :width="480" trigger="click">
                        <template #reference>
                            <el-button type="success" size="small"  v-if="tagAddable"  plain>添加标签</el-button>
                        </template>
                        <template #default>
                            <div class="article-tag-box">
                                <div class="tag-box-header">标签</div>
                               
                                <el-input v-model="tagInput" @keyup.enter.native="handleTagInput" placeholder="输入标签名,按enter可添加新的标签"></el-input>
                                <div style="margin:10px 0;" >添加标签</div>
                                <div class="tags-wrapper">
                                    <el-tag v-for="tag in allTags" :key="tag.id"
                                        @click="addTagToArticle(tag)"
                                        :type="isTagSelected(tag.id)?'info':''"
                                        :style="{ cursor: isTagSelected(tag.id)?'not-allowed':'pointer', 'margin': '0 10px 10px 0' }">
                                        {{ tag.tagName }}
                                    </el-tag>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </el-form-item>
                <el-form-item prop="articleCover" label="上传封面">
                    <div class="article-cover">
                        <article-cover-upload v-model="article.articleCover"/>
                    </div>
                </el-form-item>
                <el-form-item prop="isTop" label="置顶">
                    <el-switch
                        v-model="article.isTop"
                        :inactive-value="1"
                        :active-value="0"
                        inline-prompt
                        active-text="是"
                        inactive-text="否"
                    />
                </el-form-item>
                <el-form-item prop="isSeen" label="是否可见">
                    <el-radio-group v-model="article.isSeen">
                        <el-radio :label="1">公开</el-radio>
                        <el-radio :label="2">私密</el-radio>
                        <el-radio :label="3">评论可见</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </Dialog>
    </div>
</template>

<script>
export default {
    name: 'articlePublish'
}
</script>
<script setup>
import VMdEditor from '@/components/VMdEditor.vue'
import Pagination from '@/components/Pagination.vue'
import { ref, reactive, onMounted, computed,watch } from 'vue'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'
import { useRouter,useRoute } from 'vue-router'
import { publishArticle as publishArticleApi } from '@/api/articleApi'
import Dialog from '@/components/Dialog.vue'
import { queryCategoryTreeList } from '@/api/categoryApi'
import { listAllTag,createTag } from '@/api/tagApi'
import ArticleCoverUpload from '@/components/ArticleCoverUpload.vue'
// 使用tagsViewStore
import useTagsView from '@/store/tagsView'
const tagsViewStore = useTagsView()


const router = useRouter()
const route = useRoute()

console.log('setup...articlePublish');

/* watch(()=>route,(newRoute,oldRoute)=>{
    // 进入当前组件 或 离开当前组件都会触发
    console.log(newRoute,newRoute.path,newRoute.params,'newRoute..');

},{immediate:true,deep: true})
 */
let article = ref({
    articleTitle: '',
    mdContent: ``,
    htmlContent: '',
    tagIdList: [],
    categoryId: null,
    isTop: 0,
    isSeen: 1,
    articleType: 1,
    status: 1
})
let tagList = ref([])

let articleFormRules = {
    categoryId: [
        { required: true, message: '请选择分类id', trigger:'blur'}
    ],
    tagIdList: [
        { validator: (rule,value,callback)=>{
                        if(!value || value.length == 0) {
                            callback(new Error('请至少添加一个标签'))
                        }else {
                            callback() // 注意, 这里需要调用callback, 一定要写, 否则后面会进不了后面字段的校验
                            // 见：el-form表单校验无效 - https://blog.csdn.net/monparadis/article/details/117110627
                        }
                    }
            , trigger:'blur' }
    ],
    articleCover: [
    { validator: (rule,value,callback)=>{
                        if(!value) {
                            callback(new Error('来张图片作封面?'))
                        }else {
                            callback()
                        }
                    }
            , trigger:'blur' }
    ],
}

const articleContentRef = ref(null)
const articleTitleRef = ref(null)

let dialog = ref({
    title: '发布文章',
    visible: false,
})

function preparePublishArticle() {
    console.log(article.value);
    if (!article.value.articleTitle) {
        Messager.error('文章标题不能为空')
        articleTitleRef.value.focus()
        return
    }
    if (!article.value.mdContent) {
        Messager.error('文章内容不能为空')
        articleContentRef.value.focus()
        return
    }

    dialog.value.visible = true
}

const articleFormRef = ref(null)
// 确认发布文章
function handleConfirm() {
    console.log('111');
    // debugger
    articleFormRef.value.validate((valid)=>{
        // debugger
        console.log('valid',valid);
        if(!valid) {
            console.log('校验不通过');
            return
        }
        console.log('校验通过');

        publishArticleApi(article.value).then(res=>{
            Messager.ok('发布成功')
            tagsViewStore.closeSpecifiedTag({name: route.name})
            router.push({path:'/article/list'})
        })

    })
}
function handleCloseDialog() {
    articleFormRef.value.clearValidate(); // 清空表单验证
}


let defaultProps = {
    children: 'children',
    label: 'categoryName',
    value: 'id'
}
let categoryTreeSelectData = ref([])
function getCategoryTreeList() {
    queryCategoryTreeList({}).then(res => {
        categoryTreeSelectData.value = res
    })
}
function getAllTags() {
    listAllTag().then(res => {
        allTags.value = res
    })
}

onMounted(() => {
    getCategoryTreeList()
    getAllTags()
})

const allTags = ref([])
const tagInput = ref('')
let tagAddable = computed({
    get() {
        return tagList.value.length < 6
    }
})
function handleTagInput() {
    if(tagList.value.length > 6) {
        Messager.warn('文章已经添加够多的标签了')
        return
    }
    createTag({tagName:tagInput.value}).then(res=>{
        getAllTags()
        tagList.value.push(res)
        article.value.tagIdList = tagList.value.map(tag=>tag.id)
        tagInput.value = ''
    })
}

function addTagToArticle(tag) {
    let tagIds = tagList.value.map(tag => tag.id)
    if(tagIds.indexOf(tag.id) != -1) {
        return
    }
    tagList.value.push(tag)
    article.value.tagIdList = tagList.value.map(tag=>tag.id)
}

function isTagSelected(tagId) {
    return tagList.value.map(tag => tag.id).indexOf(tagId) != -1
}

function handleCloseTag(tag) {
    tagList.value.splice(tagList.value.map(tag=>tag.id).indexOf(tag.id),1)
    article.value.tagIdList = tagList.value.map(tag=>tag.id)
}

// 当表单数据发生变化时,就校验具体的表单字段
watch(()=>article.value.tagIdList,(newValue,oldValue)=>{
    articleFormRef.value.validateField('tagIdList')
})
watch(()=>article.value.articleCover,(newValue,oldValue)=>{
    articleFormRef.value.validateField('articleCover')
})
watch(()=>article.value.categoryId,(newValue,oldValue)=>{
    articleFormRef.value.validateField('categoryId')
})


</script>

<style lang="scss" scoped>
.main-box {
    display: flex;
    flex-direction: column;
}

.article-tag-box {
    height: 200px;

    display: flex;
    flex-direction: column;

    .tag-box-header {
        text-align: center;
        margin: 10px 0;
    }

    .tags-wrapper {
        flex: 1;
        overflow: auto;
    }
}

.tag {
    margin: 5px 10px 5px 0;
}

.article-cover {
    width: 360px;
    height: 180px;
}
</style>
